<template>
	<view class="container">
		<view class="reason-item">
			<textarea maxlength="-1" placeholder="Type reason here" v-model="reason"></textarea>
		</view>
		<view class="order-info">
			<view class="order-number">Order {{order_no}}</view>
			<view class="tips">
				<view class="tips-icon">
					<image src="/static/images/outline-error_outline-24px.png"></image>
				</view>
				<text class="tips-content">Our  support center will review and contact you soon.</text>
			</view>
			<view class="tips">
				<view class="tips-icon">
					<image src="/static/images/outline-error_outline-24px.png"></image>
				</view>
				<text class="tips-content">Terms of service (Refund)</text>
			</view>
		</view>
		<button class="submit-btn btn-hg100" :loading="logining" @click="submit">Submit</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logining: false,
				order_id: '',
				order_no: '',
				reason: ''
			}
		},
		onLoad(options) {
			if(options.order_id) {
				this.order_id = options.order_id
			}
			if(options.order_no) {
				this.order_no = options.order_no
			}
		},
		methods: {
			submit() {
				let data = {
					order_id: this.order_id,
					payment_type: 1,
					refund_reason: this.reason
				}
				let _this = this
				this.logining = true
				this.$api.orderRefund(data, res => {
					if(res.code === 1) {
						_this.$common.successToShow("Order cancelled successfully", () => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						})
					} else {
						_this.$common.errorToShow(res.msg)
						_this.logining = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	.reason-item {
		border: 2rpx solid rgba(0, 0, 0, 0.15);
		box-sizing: border-box;
		border-radius: 8rpx;
		padding: 30rpx 40rpx;
		textarea {
			width: 100%;
			height: 200rpx;
		}
		&::after {
			content: "Reason";
			font-family: Roboto;
			font-size: $font-sm - 2upx;
			letter-spacing: 0.666666rpx;
			color: #263238;
			position: absolute;
			top: 0;
			background-color: #fff;
			padding: 10rpx 20rpx;
		}
	}
	.order-info {
		.order-number {
			font-family: Roboto;
			font-weight: bold;
			line-height: 180%;
			font-size: $font-base;
			color: #242526;
			letter-spacing: 1rpx;
			padding: 12rpx;
			margin-bottom: 40rpx;
		}
		.tips {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			padding-left: 3%;
			margin-bottom: 20rpx;
			.tips-icon {
				flex: 1;
				image {
					width: 1.3rem;
					height: 1.3rem;
				}
			}
			.tips-content {
				flex: 9;
				font-family: Poppins;
				font-size: $font-sm + 2upx;
				line-height: 180%;
				letter-spacing: 1rpx;
				color: #43454B;
			}
		}
	}
}
</style>
